<template>
	<view>
		<view class="uni-list">
			<view class="uni-list-cell" v-for="(item,key) in hideItems" :key="key" >
				<view class=" uni-media-list ">
					<image class="uni-media-list-logo" :src="item.imgUrl"></image>
					<view class="uni-flex uni-row">
						<view class="flex-item">
							{{item.text}}
						</view>
						<view class="flex-item-right">
							<switch :checked="item.checked" @change="switch1Change" :data-value-id="item.navigateValue" class="color-height" />
						</view>
					</view>

				</view>
			</view>
		</view>

		<view class="uni-list">
			<view class="uni-list-cell" v-for="(item,key2) in exitItems" :key="key2" >
				<view class="uni-media-list ">

					<image class="uni-media-list-logo" :src="item.imgUrl"></image>
					<view class="uni-flex uni-row">
						<view class="flex-item">
							{{item.text}}
						</view>
						<view class="flex-item-right">
							<switch :checked="item.checked" @change="switch1Change" :data-value-id="item.navigateValue" class="color-height" />
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapState,mapMutations
	} from 'vuex'
	import {
		getPartMessageConfig,
		savePartMessageConfig
	} from '@/api/im/index'
	export default {
		data() {
			return {
				keys: [
					"hasNotifyDetail",
					"hasLogistics",
					"hasCmsVerify",
					"hasNewFans",
					"hasNewVisit",
					"hasNotifyComment",
				],
				partyMessageConfig: {
					"hasNotifyDetail": "N",
					"hasLogistics": "N",
					"hasCmsVerify": "N",
					"hasNewFans": "N",
					"hasNewVisit": "N",
					"hasNotifyComment": "N",
				},
				hideItems: [{
						text: '通知显示消息详情',
						imgUrl: '../../../static/image/my/notify/notify.png',
						navigateValue: 0
					},
					{
						text: '物流信息',
						imgUrl: '../../../static/image/my/notify/express.png',
						navigateValue: 1
					},
					{
						text: '帖子审核',
						imgUrl: '../../../static/image/my/notify/verify.png',
						navigateValue: 2
					},
				],
				exitItems: [
					{
						text: '新粉丝',
						imgUrl: '../../../static/image/my/notify/fans.png',
						navigateValue: 4
					},
					{
						text: '新评论/点赞',
						imgUrl: '../../../static/image/my/notify/upvote.png',
						navigateValue: 5
					}
				],

			};
		},
		computed: {
			...mapGetters(
				["hasLogin", "userId"],
			),
		},
		onLoad(e) {
			console.log("page notify....")
			this.loadPartyMessage();
		},
		methods: {
			
			loadPartyMessage() {
				getPartMessageConfig(this.userId).then(response => {
					this.partyMessageConfig = response.data;
					//console.log(JSON.stringify(response))
					this.hideItems[0].checked = (this.partyMessageConfig.hasNotifyDetail == "Y" ? true : false)
					this.hideItems[1].checked = (this.partyMessageConfig.hasLogistics == "Y" ? true : false)
					this.hideItems[2].checked = (this.partyMessageConfig.hasCmsVerify == "Y" ? true : false)
					this.exitItems[0].checked = (this.partyMessageConfig.hasNewVisit == "Y" ? true : false)
					this.exitItems[1].checked = (this.partyMessageConfig.hasNewFans == "Y" ? true : false)
				})
				
			},
			switch1Change(e) {
				var valueId = e.currentTarget.dataset.valueId;
				this.partyMessageConfig.partyId= this.userId;
				this.partyMessageConfig.createdBy=this.userId;
				this.partyMessageConfig.lastUpdatedBy=this.userId;
				let key = this.keys[valueId]
				let val = e.detail.value == false ? "N" : "Y";
				this.partyMessageConfig[key] = val;
				let message ="";
				if(valueId < 3) {
					message = this.hideItems[valueId].text
				} else {
					message = this.exitItems[valueId].text
				}
				
				message = (e.detail.value ? "开启":"关闭")+(message)
				savePartMessageConfig(this.partyMessageConfig).then(response => {
					uni.showModal({
						title: "提示",
						content: message+"成功"
					})
				}).catch(err => {
					uni.showModal({
						title: "提示",
						content: message+"不成功，请重试，谢谢"
					})
					this.hideItems[valueId].checked = e.detail.value
				})
			}
		}
	}
</script>

<style>
	.uni-list {
		width: 710px !important;
		margin: 20px;
		border-radius: 15px;
	}

	.color-height {
		height: 50upx !important;
	}

	.uni-media-list-logo {
		width: 50px !important;
		height: 50px !important;
	}

	.uni-media-list-body {
		height: 36px;
		line-height: 36px;
		font-size: 28px !important;
		justify-content: space-around;
	}

	.uni-media-list-text-top {
		height: 40px !important;
		width: 100upx !important;
		overflow: hidden;
	}

	.flex-item {
		width: 430upx;
		text-align: left;
	}

	.flex-item-right {
		width: 150upx;
		text-align: right;
	}
</style>
